<template>
  <div class="zyCommonWrapper" v-show="!$route.meta.ishideMenu">
    <!--头部导航-->
    <div class="zyHeaderWrapper">
      <div class="zyHeader">
        <div class="rightInfo clear">
          <!-- <Dropdown class="historyItem">
            <div @click="toggleTheme" class="theme-color">
              <i v-if="themeColor" class="iconfont zy-common-qianse"></i>
              <i v-else class="iconfont zy-common-shense"></i>
            </div>
          </Dropdown> -->
          <Dropdown class="historyItem">
            <div class="notice" @click="systemNotice">
              <Icon type="md-notifications-outline" style="font-size: 22px"/>
              <span class="count" v-if="noticeTotal">{{ noticeTotal > 99 ? "99+" : noticeTotal }}</span>
            </div>
          </Dropdown>
          <Dropdown class="historyItem download-qr" v-if="appName || appName1">
            <div class="droptitle">
              <span class="con">{{ $t('common.PDADownload') }}</span>
            </div>
            <DropdownMenu slot="list">
              <DropdownItem name="editPassword">
                <!-- pda -->
                <div style="text-align: center" class="name" v-if="appName">
                  {{ appName }}
                </div>
                <vue-qr :text="appCode" :size="200" v-if="appName"></vue-qr>
                <!-- app -->
                <div style="text-align: center" v-if="appName1">
                  {{ appName1 }}
                </div>
                <vue-qr :text="appCode1" :size="200" v-if="appName1"></vue-qr>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
          <!-- <Dropdown class="historyItem" @on-click="switchLanguage">
            <div class="droptitle">
              <span class="con">{{ langName }}</span>
              <i class="newMenuxiangxia iconfont down"></i>
            </div>
            <DropdownMenu slot="list">
              <DropdownItem name="zh_CN">
                <span class="con">简体中文</span>
              </DropdownItem>
              <DropdownItem name="en_US">
                <span class="con">English</span>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown> -->
          <Dropdown class="historyItem" @on-click="systemoperation">
            <div class="droptitle">
              <div class="userImg"></div>
              <span class="con">{{ userName }}</span>
              <i class="newMenuxiangxia iconfont down"></i>
            </div>
            <DropdownMenu slot="list">
              <!--              <DropdownItem name="signOut" @click.native="showSignatureModal">-->
              <!--                <span class="con" >{{$t('签名')}}</span>-->
              <!--              </DropdownItem>-->
              <DropdownItem name="editPassword">
                <!-- editPassword -->
                <span class="con">{{ $t('common.ediPass') }}</span>
              </DropdownItem>
              <DropdownItem name="signOut" @click.native="logOut">
                <span class="con">{{ $t('common.logOut') }}</span>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
        <header class="logo">
					<span class="logoBox">
          <img src="~images/hx-logo.jpg" alt="logo">

					</span>
        </header>
        <ul class="fistMenu clear">
          <li
              class="item"
              v-for="(item, index) in showfirstMenu"
              :class="{ active: firstIndex === index }"
              :key="index"
              @click="selectfirstMenu(index, item)"
          >
            <i class="iconfont" v-if="item.menuIcon.indexOf('#') === -1" :class="item.menuIcon"></i>
            <i class="newMenumoren iconfont" v-else></i>
            <span class="con">{{ item.menuName }}</span>
          </li>
          <Dropdown class="moreItem" @on-click="moreSelect" v-show="moreMenu.length > 0 && moreBtn === ''">
            <div class="droptitle">
              <!--              <i class="newMenugengduo1 iconfont leftIcon"></i>-->
              <span class="con">
								<!--                {{$t('common.more')}}-->
								<i class="iconfont zy-common-gengduo1 down"></i>
							</span>
              <!--              <i class="newMenuxiangxia iconfont down"></i>-->
            </div>
            <DropdownMenu slot="list" class="list">
              <DropdownItem v-for="(item, index) in moreMenu" :name="index" :key="index">
                <i class="iconfont leftIcon" v-if="item.menuIcon.indexOf('#') === -1" :class="item.menuIcon"></i>
                <i class="newMenumoren iconfont leftIcon" v-else></i>
                <span class="con">{{ item.menuName }}</span>
                <i class="iconfont newMenuright rightIcon"></i>
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </ul>
      </div>
    </div>
    <!--左侧导航-->
    <div class="zySidebarWrapper" :class="{ menuAnimate: animate }" v-show="secondMenu.length > 0">
      <div class="zySidebar">
        <div
            class="subItem"
            v-for="(item, index) in secondMenu"
            :key="index"
            :class="{ open: item.open, active: secondIndex === index }"
            @click.stop="selectsecondMenu(index, item)"
        >
          <div class="content" :class="{ single: item.childrenMenus.length === 0 }">
            <i class="iconfont iconLeft" v-if="item.menuIcon.indexOf('#') === -1" :class="item.menuIcon"></i>
            <i class="newMenumoren iconfont iconLeft" v-else></i>
            <span class="con" :title="item.menuName && item.menuName.length > 7 ? item.menuName : ''">{{
                item.menuName
              }}</span>
            <i class="newMenuright iconfont arrow" v-if="item.childrenMenus.length > 0"></i>
          </div>
          <ul class="childMenu" v-show="item.childrenMenus.length > 0">
            <li
                v-for="(val, i) in item.childrenMenus"
                :key="i"
                :class="{ active: index === secondIndex && i === thirdIndex }"
                @click.stop="selectthirdMenu(i, val, index)"
            >
              <span class="thirdItem"
                    :title="val.menuName && val.menuName.length > 11 ? val.menuName : ''">{{ val.menuName }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="zyMinSidebar">
        <!-- <div
                 class="iconWrap"
                 v-for="(item, index) in secondMenu"
                 :key="index"
                 :class="{'active': secondIndex === index}"
                 @click.stop="minSelectsecondMenu(index, item)"
               >
                 <div v-if="!(Array.isArray(item.childrenMenus) && item.childrenMenus.length > 0)">
                   <i class="iconfont" v-if="item.menuIcon.indexOf('#') === -1" :class="item.menuIcon"></i>
                   <i class="newMenumoren iconfont iconLeft" v-else></i>
                 </div>
                 <div v-else>
                   <Poptip trigger="hover" placement="bottom-start">
                       <i class="iconfont" v-if="item.menuIcon.indexOf('#') === -1" :class="item.menuIcon"></i>
                       <i class="newMenumoren iconfont iconLeft" v-else></i>
                     <div class="children-menu" slot="content">
                       <ul>
                         <li v-for="(m,i) in item.childrenMenus" @click.stop="selectthirdMenu(i, m, index)" :class="{'active': index === secondIndex && i === thirdIndex}" :key="i">{{m.menuName}}</li>
                       </ul>
                     </div>
                   </Poptip>
                 </div>
               </div> -->
        <div v-for="(item, index) in secondMenu" :key="index">
          <div
              class="iconWrap"
              :class="{ active: secondIndex === index }"
              @click.stop="minSelectsecondMenu(index, item)"
              v-if="!(Array.isArray(item.childrenMenus) && item.childrenMenus.length > 0)"
          >
            <i class="iconfont" v-if="item.menuIcon.indexOf('#') === -1" :class="item.menuIcon"></i>
            <i class="newMenumoren iconfont iconLeft" v-else></i>
          </div>
          <div v-else>
            <Poptip trigger="hover" placement="bottom-start">
              <div class="iconWrap" :class="{ active: secondIndex === index }">
                <i class="iconfont" v-if="item.menuIcon.indexOf('#') === -1" :class="item.menuIcon"></i>
                <i class="newMenumoren iconfont iconLeft" v-else></i>
              </div>
              <div class="children-menu" slot="content">
                <ul>
                  <li
                      v-for="(m, i) in item.childrenMenus"
                      @click.stop="selectthirdMenu(i, m, index)"
                      :class="{
											active: index === secondIndex && i === thirdIndex,
										}"
                      :key="i"
                  >
                    {{ m.menuName }}
                  </li>
                </ul>
              </div>
            </Poptip>
          </div>
        </div>
      </div>
      <Button @click="slideAnimate" class="shrinkBtn" long>
        <i class="iconfont zy-common-shouqi1" :class="{ animate: animate }"></i>
      </Button>
    </div>
    <div class="currentLocation" v-if="!$route.meta.isNotFound">
      <!--      <i class="iconfont newMenushouye"></i>-->
      <!--      <em>{{$t('common.curLoc')}}:</em>-->
      <div class="item" v-for="(item, index) in currentLocation" :key="index">
				<span v-if="index !== currentLocation.length - 1">
					<a href="javaScript:void(0);" @click.stop="clickLocation(item)">{{ item.menuName }}</a>
					<em class="iconfont zy-common-jiantou-copy"></em>
				</span>
        <span v-else>
					<a href="javaScript:void(0);" class="currentPageLocation" @click.stop="clickLocation(item)">{{
              item.menuName
            }}</a>
				</span>
      </div>
    </div>
    <password ref="passwordRefs"></password>
    <signature ref="signature"/>
  </div>
</template>

<script>
import password from '../views/login/password';
import Vue from 'vue';
import store from '@/store/store';
import {Title} from '@/store/types';
import vueQr from 'vue-qr';

const isTong = process.env.NODE_ENV === 'tong';
let ksiot = '/kakone';
if (isTong) {
  ksiot = '';
}
import signature from '@/views/devBasic/capex/components/signature.vue';

export default {
  name: 'commonHeader',
  components: {password, vueQr, signature},
  data() {
    return {
      noticeTotal: 0,
      afterContent: '12',
      fontWidth: this.$i18n.locale === 'zh_CN' ? 16 : 8,
      menuData: [],
      firstIndex: '',
      secondIndex: '',
      thirdIndex: '',
      secondMenu: [],
      thirdMenu: [],
      secondShow: true,
      currentLocation: [],
      userName: '',
      logoBg: {},
      animate: false,
      regularUseMenu: [], //经常使用的菜单
      showMenuNum: 5, //展示一级菜单个数
      showTop: false,
      hierarchyName: '',
      appCode: '',
      appName: '',
      imageUrl: require('../assets/images/icon.jpg'),
      appCode1: '',
      appName1: '',
      menuArr: [],
      menuArrTemp: [],
      moreBtn: '',
      diskTotal: 0,
      diskUsed: 0,
      isShowDisk: false,
      langName: '',
      themeColor: false,
    };
  },
  created() {
    this.getIcon();
    this.getHcodeAndbtn();
    window.localStorage.removeItem('ziyunPortalMenu');
    this.moreBtn = window.localStorage.getItem('KaPortalJumpMenu');
    this.queryMenu();
    window.addEventListener('resize', () => {
      this.rearrange();
    });
    const appEl = document.getElementById('app');
    if (window.localStorage.getItem('language') == 'en_US') {
      this.langName = 'English';
      appEl.classList.add('en_US');
    } else if (window.localStorage.getItem('language') == 'zh_CN') {
      this.langName = '简体中文';
      appEl.classList.add('zh_CN');
    }
    this.getNoticeTotal();
    this.myInterval = setInterval(() => {
      this.getNoticeTotal();
    }, 1000 * 60);
  },
  // mounted() {
  //   this.queryMenu()
  //   window.addEventListener('resize', () => {
  //     this.rearrange()
  //   })
  //   if(window.localStorage.getItem('language')=='en_US'){
  //     this.langName = 'English'
  //   }else if(window.localStorage.getItem('language')=='zh_CN'){
  //     this.langName = '简体中文'
  //   }
  // },
  methods: {
    getNoticeTotal() {
      this.axios({
        method: 'get',
        url: '/dms/messageWarning/queryTotalUnread',
      }).then((res) => {
        this.noticeTotal = res.data;
      });
    },
    systemNotice() {
      this.$router.push({path: '/systemNotice'});
    },
    showSignatureModal() {
      this.$refs.signature.showModal();
    },
    toggleTheme() {
      this.themeColor = !this.themeColor;
      const appEl = document.getElementById('app');
      if (!this.themeColor) {
        appEl.classList.add('theme-light');
        appEl.classList.remove('theme-dark');
      } else {
        appEl.classList.remove('theme-light');
        appEl.classList.add('theme-dark');
      }
    },
    getIcon() {
      window.localStorage.removeItem('app_download_url_waiwang');
      window.localStorage.removeItem('app_qrname_waiwang');
      window.localStorage.removeItem('mapp_download_url_waiwan');
      window.localStorage.removeItem('tv_qrname_waiwang');
      this.axios({
        method: 'get',
        url: '/basic/sys/getSysConfig',
        params: {},
      }).then((res) => {
        if (res.code === 200) {
          if (res.data) {
            for (let item of res.data) {
              if (item.configCode == 'app_download_url_waiwang') {
                window.localStorage.setItem('app_qrname_waiwang', item.configName);
              }

              if (item.configCode == 'mapp_download_url_waiwan') {
                window.localStorage.setItem('tv_qrname_waiwang', item.configName);
              }

              window.localStorage.setItem(item.configCode, item.configVal);
            }

            //this.imageUrl = window.localStorage.getItem("company_icon");
          }
          this.appCode = window.localStorage.getItem('app_download_url_waiwang');
          this.appName = window.localStorage.getItem('app_qrname_waiwang');
          this.appCode1 = window.localStorage.getItem('mapp_download_url_waiwan');
          this.appName1 = window.localStorage.getItem('tv_qrname_waiwang');
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    getHcodeAndbtn() {
      this.axios({
        method: 'get',
        url: '/basic/menu/findPermissionByToken',
        params: {},
      }).then((res) => {
        if (res.code === 200) {
          window.localStorage.setItem('USER_URI', JSON.stringify(res.data));
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    switchLanguage(name) {
      this.$i18n.locale = name;
      if (name == 'en_US') {
        this.langName = 'English';
      } else if (name == 'zh_CN') {
        this.langName = '简体中文';
      }
      window.localStorage.setItem('language', name);
      window.location.reload();
    },
    forMethod(data) {
      for (let i = 0; i < data.length; i++) {
        data[i].description = this.langName === '简体中文' ? data[i].name : data[i].enName;
        data[i].menuName = this.langName === '简体中文' ? data[i].name : data[i].enName;
        data[i].menuUrl = data[i].url;
        if (data[i].children.length > 0) {
          data[i].childrenMenus = data[i].children;
          this.forMethod(data[i].children);
        } else {
          data[i].childrenMenus = [];
        }
      }
    },
    queryMenu() {
      this.userName = window.localStorage.getItem('ziyunFactoryPortalName');
      this.axios({
        method: 'get',
        url: '/basic/menu/findMenuByToken',
        params: {
          menuType: 1,
        },
      }).then((res) => {
        if (res.code === 200) {
          this.menuArr = res.data.map((item) => {
            return this.langName === '简体中文' ? item.name : item.enName;
          });
          this.rearrange();
          // 二级菜单的parentId = 2202, 三级菜单的arentId = 12
          for (let i = 0; i < res.data.length; i++) {
            res.data[i].createBy = 'ZY000036915337';
            res.data[i].description = this.langName === '简体中文' ? res.data[i].name : res.data[i].enName;
            res.data[i].globalUniqueId = 'ZY000036915337';
            res.data[i].id = 'ZY000036915337';
            res.data[i].isPresent = 0;
            res.data[i].menuIcon = res.data[i].icon;
            res.data[i].menuName = this.langName === '简体中文' ? res.data[i].name : res.data[i].enName;
            res.data[i].menuOrder = 2;
            res.data[i].menuUrl = '###';
            res.data[i].updateBy = 'ZY000036915337';
            // res.data[i].childrenMenus = res.data[i].children;
            if (res.data[i].children.length > 0) {
              res.data[i].childrenMenus = res.data[i].children;
              this.forMethod(res.data[i].children);
            } else {
              res.data[i].childrenMenus = [];
            }
          }
          res.data.forEach((item) => {
            item.childrenMenus.forEach((ele) => {
              ele.createBy = 'ZY000036915337';
              ele.globalUniqueId = 'shebeitaizhang';
              ele.id = 2152;
              ele.isPresent = 0;
              ele.menuIcon = ele.icon;
              ele.menuOrder = 1;
              ele.parentId = 2202;
              if (ele.childrenMenus && ele.childrenMenus.length) {
                ele.childrenMenus.forEach((m) => {
                  m.createBy = 'ZY000036915337';
                  m.globalUniqueId = 'shebeitaizhang';
                  m.id = 2152;
                  m.isPresent = 0;
                  m.menuIcon = m.icon;
                  m.menuOrder = 1;
                  m.parentId = 12;
                });
              }
            });
          });
          this.compareMenu(res.data);
          this.initMenu();
        }
      });
    },
    compareMenu(data) {
      //对比本地菜单，看一级菜单是否已被更改
      let localMenuStr = localStorage.getItem('ziyunPortalMenu');
      let localMenu = [],
          isReset = false;
      if (localMenuStr && localMenuStr !== 'null') {
        localMenu = JSON.parse(localMenuStr);
      }
      for (let i = 0; i < data.length; i++) {
        let item = data[i];
        let isUpdate = true;
        for (let j = 0; j < localMenu.length; j++) {
          let val = localMenu[j];
          if (item.name === val.name) {
            isUpdate = false;
            localMenu[j] = item;
          }
        }
        if (isUpdate) {
          // false 说明本地有个菜单，已经不存在，直接展示接口最新菜单
          isReset = true;
          break; //跳出循环
        }
      }
      if (isReset) {
        this.menuData = data;
      } else {
        this.menuData = localMenu;
      }
    },
    cyclicTraversal() {
      // 根据路由循环遍历
      let route = this.$route.path;
      let pathname = this.currentPathName();
      outer: for (let i = 0; i < this.menuData.length; i++) {
        if (this.menuData[i].menuUrl.replace(pathname, '/') === route) {
          this.firstIndex = i;
          window.localStorage.setItem('ziyunMenuFirstLevel', i);
          window.localStorage.setItem('ziyunMenuSecondLevel', null);
          window.localStorage.setItem('ziyunMenuthirdLevel', null);
          break outer;
        }
        var item = this.menuData[i].childrenMenus;
        for (let j = 0; j < item.length; j++) {
          if (item[j].menuUrl.replace(pathname, '/') === route) {
            this.firstIndex = i;
            this.secondIndex = j;
            window.localStorage.setItem('ziyunMenuFirstLevel', i);
            window.localStorage.setItem('ziyunMenuSecondLevel', j);
            window.localStorage.setItem('ziyunMenuthirdLevel', null);
            break outer;
          }
          var val = item[j].childrenMenus;
          for (let k = 0; k < val.length; k++) {
            if (val[k].menuUrl.replace(pathname, '/') === route) {
              this.firstIndex = i;
              this.secondIndex = j;
              this.thirdIndex = k;
              window.localStorage.setItem('ziyunMenuFirstLevel', i);
              window.localStorage.setItem('ziyunMenuSecondLevel', j);
              window.localStorage.setItem('ziyunMenuthirdLevel', k);
              break outer;
            }
          }
        }
      }
    },
    clickLocation(item) {
      if (item.menuUrl.indexOf('##') > -1) {
        return false;
      }
      let pathname = this.currentPathName();
      if (item.menuUrl.indexOf(pathname) !== -1) {
        // 本项目用路由跳转
        let {menuName, menuIcon, menuUrl} = item;
        this.updataRegularUseMenu({menuName, menuIcon, menuUrl});
        let path = item.menuUrl;
        path = path.replace(pathname, '/');
        this.$router.push({path: path});
      } else {
        let {menuName, menuIcon, menuUrl} = item;
        this.updataRegularUseMenu({menuName, menuIcon, menuUrl});
        setTimeout(() => {
          window.location.href = item.menuUrl;
        }, 500);
      }
    },
    initMenu() {
      let zyCon = document.querySelector('.zy-content');
      if (zyCon) {
        let currLocation = document.querySelector('.currentLocation');
        currLocation.classList.add('zy-currentLocation');
      }
      this.cyclicTraversal();
      this.secondShow = false;
      if (!String(this.firstIndex)) {
        // 当前页面不在菜单里 可能是详情页 从缓存中获取父级菜单
        let firstIndex = window.localStorage.getItem('ziyunMenuFirstLevel');
        if (!firstIndex) {
          firstIndex = 'null';
        }
        this.firstIndex = Number(firstIndex);
        if (isNaN(this.firstIndex)) {
          this.firstIndex = 'null';
        }
        let secondIndex = window.localStorage.getItem('ziyunMenuSecondLevel');
        if (!secondIndex) {
          secondIndex = 'null';
        }
        this.secondIndex = Number(secondIndex);
        if (isNaN(this.secondIndex)) {
          this.secondIndex = 'null';
        }
        let thirdIndex = window.localStorage.getItem('ziyunMenuthirdLevel');
        if (!thirdIndex) {
          thirdIndex = 'null';
        }
        this.thirdIndex = Number(thirdIndex);
        if (isNaN(this.thirdIndex)) {
          this.thirdIndex = 'null';
        }
      }
      this.generateCurrentLocation();
      // 二级 菜单
      if (!String(this.firstIndex) || this.firstIndex === 'null') {
        // 不存在一级菜单时，全屏展示
        setTimeout(() => {
          let zyCon = document.querySelector('.zy-content');
          let currentLoca = document.querySelector('.zy-currentLocation');
          if (zyCon) {
            zyCon.classList.add('conAnimateBack');
          }
          if (currentLoca) {
            currentLoca.classList.add('currentLocationAnimateBack');
          }
        }, 500);
        return false;
      }
      if (this.menuData[this.firstIndex].childrenMenus.length === 0) {
        // 不存在二级菜单时，全屏展示
        setTimeout(() => {
          let zyCon = document.querySelector('.zy-content');
          let currentLoca = document.querySelector('.zy-currentLocation');
          if (zyCon) {
            zyCon.classList.add('conAnimateBack');
          }
          if (currentLoca) {
            currentLoca.classList.add('currentLocationAnimateBack');
          }
        }, 500);
        return false;
      }
      this.secondMenu = this.menuData[this.firstIndex].childrenMenus;
      this.secondShow = true;
      // 三级菜单
      if (!String(this.secondIndex) && this.secondIndex === 'null') {
        return false;
      }
      this.menuData[this.firstIndex].childrenMenus[this.secondIndex].open = true; // 默认展开
      this.thirdMenu = this.menuData[this.firstIndex].childrenMenus[this.secondIndex].childrenMenus;

      this.$nextTick(() => {
        let zyCon = document.querySelector('.zy-content');
        if (zyCon && this.animate) {
          zyCon.classList.add('conAnimateBack');
        }
      });
    },
    generateCurrentLocation() {
      //生成当前位置
      if (this.menuData.length === 0) {
        return false;
      }
      this.currentLocation = [];
      if (String(this.firstIndex) && this.firstIndex !== 'null') {
        let obj1 = {};
        obj1.menuUrl = this.menuData[this.firstIndex].menuUrl;
        obj1.menuName = this.menuData[this.firstIndex].menuName;
        this.currentLocation.push(obj1);
        if (String(this.secondIndex) && this.secondIndex !== 'null') {
          let firstData = this.menuData[this.firstIndex].childrenMenus;
          if (firstData[this.secondIndex]) {
            let obj2 = {};
            obj2.menuUrl = firstData[this.secondIndex].menuUrl;
            obj2.menuName = firstData[this.secondIndex].menuName;
            this.currentLocation.push(obj2);
            if (String(this.thirdIndex) && this.thirdIndex !== 'null') {
              let secondData = firstData[this.secondIndex].childrenMenus;
              if (secondData[this.thirdIndex]) {
                let obj3 = {};
                obj3.menuUrl = secondData[this.thirdIndex].menuUrl;
                obj3.menuName = secondData[this.thirdIndex].menuName;
                this.currentLocation.push(obj3);
              }
            }
          }
        }
      }

      if (Array.isArray(this.currentLocation) && this.currentLocation.length > 0) {
        store.commit(Title, this.currentLocation[this.currentLocation.length - 1].menuName);
      }
    },
    currentPathName() {
      let arr = window.location.href.replace(window.location.origin, '').split('/');
      if (arr.length > 1) {
        return isTong ? '/' + arr[1] + '/' : '/' + arr[2] + '/';
      } else {
        return '';
      }
    },
    selectfirstMenu(index, item) {
      this.closeSecondMenu(0);
      this.firstIndex = index;
      this.secondMenu = this.menuData[index].childrenMenus;
      this.thirdMenu = [];
      this.secondIndex = 'null';
      this.thirdIndex = 'null';
      let pathname = this.currentPathName();
      if (item.menuUrl && item.menuUrl.indexOf('##') === -1) {
        if (item.menuUrl.indexOf(pathname) !== -1) {
          // 本项目用路由跳转
          let {menuName, menuIcon, menuUrl} = item;
          this.updataRegularUseMenu({menuName, menuIcon, menuUrl});
          let path = item.menuUrl;
          path = path.replace(pathname, '/');
          this.$router.push({path: path});
        } else {
          let {menuName, menuIcon, menuUrl} = item;
          this.updataRegularUseMenu({menuName, menuIcon, menuUrl});
          setTimeout(() => {
            window.location.href = ksiot + item.menuUrl;
          }, 500);
        }
      } else {
        // 默认展开下级
        if (this.secondMenu.length === 0) {
          return false;
        }
        let secondeUrl = this.secondMenu[0].menuUrl;
        this.secondIndex = 0;
        this.thirdMenu = this.menuData[this.firstIndex].childrenMenus[0].childrenMenus;
        if (secondeUrl && secondeUrl.indexOf('##') === -1) {
          if (secondeUrl.indexOf('dncManage') != -1) {
            this.isShowDisk = true;
          } else {
            this.isShowDisk = false;
          }
          this.selectsecondMenu(0, this.secondMenu[0]);
        } else {
          //展开第三级
          if (this.thirdMenu.length === 0) {
            return false;
          }
          let threeUrl = this.thirdMenu[0].menuUrl;
          if (threeUrl.indexOf('dncManage') != -1) {
            this.isShowDisk = true;
          } else {
            this.isShowDisk = false;
          }
          if (threeUrl && threeUrl.indexOf('##') === -1) {
            this.selectthirdMenu(0, this.thirdMenu[0], 0);
          }
        }
      }
      this.generateCurrentLocation();
    },
    closeSecondMenu(_index) {
      this.secondMenu.forEach((item, index) => {
        if (_index != index) item.open = false;
      });
    },
    selectsecondMenu(index, item, isOpen) {
      //isOpen 点击缩小的二级菜单，默认展开三级菜单
      if (item.hasOwnProperty('open')) {
        item.open = !item.open;
      } else {
        item.open = true;
      }
      if (isOpen) {
        item.open = true;
      }

      this.closeSecondMenu(index);

      let pathname = this.currentPathName();
      if (item.menuUrl && item.menuUrl.indexOf('##') === -1) {
        if (item.menuUrl.indexOf(pathname) !== -1) {
          let {menuName, menuIcon, menuUrl} = item;
          this.updataRegularUseMenu({menuName, menuIcon, menuUrl});
          let path = item.menuUrl;
          path = path.replace(pathname, '/');
          this.$router.push({path: path});
        } else {
          let {menuName, menuIcon, menuUrl} = item;
          this.updataRegularUseMenu({menuName, menuIcon, menuUrl});
          window.location.href = ksiot + item.menuUrl;
        }
      }
      this.generateCurrentLocation();
      this.$forceUpdate();
    },
    selectthirdMenu(index, item, secondeIndex) {
      this.$store.commit('detail/SET_CALEND', '');
      this.thirdIndex = index;
      this.secondIndex = secondeIndex;
      let pathname = this.currentPathName();
      if (item.menuUrl.indexOf(pathname) !== -1) {
        let {menuName, menuIcon, menuUrl} = item;
        this.updataRegularUseMenu({menuName, menuIcon, menuUrl});
        let path = item.menuUrl;
        path = path.replace(pathname, '/');
        this.$router.push({path: path});
      } else {
        let {menuName, menuIcon, menuUrl} = item;
        this.updataRegularUseMenu({menuName, menuIcon, menuUrl});
        window.location.href = ksiot + item.menuUrl;
      }
      this.generateCurrentLocation();
    },
    minSelectsecondMenu(index, item) {
      this.closeSecondMenu(index);
      //点击缩小的二级菜单
      this.selectsecondMenu(index, item, true);
      // this.slideAnimate()
    },
    slideAnimate() {
      this.animate = !this.animate;
      let zyCon = document.querySelector('.zy-content');
      let currentLoca = document.querySelector('.zy-currentLocation');
      if (this.animate) {
        if (zyCon) {
          zyCon.classList.add('conAnimateBack');
        }
        if (currentLoca) {
          currentLoca.classList.add('currentLocationAnimateBack');
        }
      } else {
        if (zyCon) {
          zyCon.classList.remove('conAnimateBack');
        }
        if (currentLoca) {
          currentLoca.classList.remove('currentLocationAnimateBack');
        }
      }
    },
    widthCalc(pmwidth, menuwidth) {
      if (this.menuArrTemp.length > 0)
        if (pmwidth > menuwidth) {
          if (pmwidth > menuwidth + this.menuArrTemp.slice(-1)[0].length * this.fontWidth + 69) {
            this.showMenuNum = this.menuArrTemp.length;
          } else {
            this.showMenuNum = this.menuArrTemp.length - 1;
          }
          return false;
        } else {
          this.widthCalc(pmwidth, menuwidth - (this.menuArrTemp.pop().length * this.fontWidth + 69));
        }
    },
    rearrange() {
      //  窗口变化，重新排列一级菜单
      let width = document.documentElement.clientWidth || document.body.clientWidth;
      this.menuArrTemp = JSON.parse(JSON.stringify(this.menuArr));
      let pmwidth = parseInt(width - 492 - 139 - 90);
      let menuwidth = parseInt(this.menuArrTemp.join('').length * this.fontWidth + this.menuArrTemp.length * 69);
      this.widthCalc(pmwidth, menuwidth, this.menuArrTemp);
    },
    updataRegularUseMenu(obj) {
      // 更新常用菜单
      let isExist = false;
      for (let i = 0; i < this.regularUseMenu.length; i++) {
        let item = this.regularUseMenu[i];
        if (item.menuUrl === obj.menuUrl) {
          isExist = true;
        }
      }
      if (isExist) {
        return false;
      }
      if (this.regularUseMenu.length > 5) {
        this.regularUseMenu = this.regularUseMenu.slice(0, 4);
      }
      this.regularUseMenu.unshift(obj);
      localStorage.setItem('ziyunRegularUseMenu', JSON.stringify(this.regularUseMenu));
    },
    moreSelect(index) {
      if (this.showMenuNum !== 0) {
        let lastIndex = this.showMenuNum - 1; // 一级菜单最后一个菜单下标
        let exchangeIndex = this.showMenuNum + Number(index); // 要交换的菜单下标
        let temp = this.menuData[lastIndex];
        Vue.set(this.menuData, lastIndex, this.menuData[exchangeIndex]);
        Vue.set(this.menuData, exchangeIndex, temp);
        localStorage.setItem('ziyunPortalMenu', JSON.stringify(this.menuData));
        this.selectfirstMenu(lastIndex, this.menuData[lastIndex]);
      } else {
        localStorage.setItem('ziyunPortalMenu', JSON.stringify(this.menuData));
        this.selectfirstMenu(index, this.menuData[index]);
      }
    },
    systemoperation(name) {
      if (name === 'editPassword') {
        //跳转修改密码
        this.$refs.passwordRefs.isDialog = true;
      } else {
        //跳转登录页
        // window.localStorage.removeItem('ziyunMenuFirstLevel')
        // window.localStorage.removeItem('ziyunMenuSecondLevel')
        // window.localStorage.removeItem('ziyunMenuthirdLevel')
        window.localStorage.removeItem('ziyunFactoryPortalToken');
        if (navigator.userAgent.indexOf('MSIE') > 0) {
          // close IE
          if (navigator.userAgent.indexOf('MSIE 6.0') > 0) {
            window.opener = null;
            window.close();
          } else {
            window.open('', '_top');
            window.top.close();
          }
        } else {
          // close chrome;It is effective when it is only one.
          window.opener = null;
          window.open('', '_self');
          window.close();
        }
      }
    },
    logOut() {
      window.localStorage.removeItem('ziyunFactoryPortalToken');
      window.localStorage.removeItem('isAdmin');
      this.$router.push({path: '/'});
    },
  },
  computed: {
    moreMenu: function () {
      if (this.menuData.length > this.showMenuNum) {
        return this.menuData.slice(this.showMenuNum, this.menuData.length);
      } else {
        return [];
      }
    },
    showfirstMenu: function () {
      if (this.menuData.length > this.showMenuNum) {
        return this.menuData.slice(0, this.showMenuNum);
      } else {
        return this.menuData;
      }
    },
  },
  watch: {
    animate: function (val) {
      store.commit('menuScale', val);
    },
    $route: function () {
      // this.animate = false
      if (this.menuData.length > 0) {
        this.initMenu();
        this.generateCurrentLocation();
      }
      setTimeout(function () {
        let zyCon = document.querySelector('.zy-content');
        let currLocation = document.querySelector('.currentLocation');
        if (zyCon && currLocation && this.animate) {
          currLocation.classList.add('zy-currentLocation');
          currLocation.classList.remove('currentLocationAnimateBack');
        } else if (currLocation && this.animate) {
          currLocation.classList.remove('zy-currentLocation');
          currLocation.classList.add('currentLocationAnimateBack');
        }
      }, 500);
    },
    secondMenu: function (data) {
      if (data.length === 0) {
        // 不存在二级菜单时，全屏展示
        let zyCon = document.querySelector('.zy-content');
        let currentLoca = document.querySelector('.zy-currentLocation');
        if (zyCon) {
          zyCon.classList.add('conAnimateBack');
        }
        if (currentLoca) {
          currentLoca.classList.add('currentLocationAnimateBack');
        }
      } else {
        let zyCon = document.querySelector('.zy-content');
        let currentLoca = document.querySelector('.zy-currentLocation');
        if (this.animate) {
          if (zyCon) {
            zyCon.classList.add('conAnimateBack');
          }
          if (currentLoca) {
            currentLoca.classList.add('currentLocationAnimateBack');
          }
        } else {
          if (zyCon) {
            zyCon.classList.remove('conAnimateBack');
          }
          if (currentLoca) {
            currentLoca.classList.remove('currentLocationAnimateBack');
          }
        }
      }
    },
  },
};
</script>
<style scoped lang="scss">
.zyCommonWrapper {
  .zyHeaderWrapper {
    height: 60px;

    .zyHeader {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 60px;
      background: rgb(0, 117, 193);
      // padding-left: 25px;
      background-size: contain;
      background-repeat: repeat-x;
      z-index: 1000;

      .rightInfo {
        float: right;
        height: 46px;
        line-height: 46px;
        background: url('~images/commonHeader/rightBg.png') no-repeat;
        background-size: 100% 100%;
        margin-top: 14px;
        // padding-left: 40px;
        .item {
          display: block;
          cursor: pointer;
          color: #f3fbff;
          float: left;
          margin: 0;

          &.leftBorder {
            .con {
              border-left: 1px solid rgba(255, 255, 255, 0.3);
            }
          }

          i {
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
          }

          .con {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            line-height: 15px;
            padding: 0 17px;
            height: 15px;
            position: relative;
            border-right: 1px solid rgba(255, 255, 255, 0.3);
          }
        }

        .news {
          width: 20px;
          height: 20px;
          text-align: center;
          line-height: 20px;
          border-radius: 50%;
          background-color: #f14033;
          display: inline-block;
          position: absolute;
          top: -10px;
          right: 2px;
          font-size: 12px;
          font-weight: normal;
          color: #ffffff;
        }

        .historyItem {
          display: block;
          cursor: pointer;
          color: #f3fbff;
          float: left;
          margin: 0 17px;
          line-height: 46px;
          height: 46px;
          padding: 0;

          &:hover {
            .down {
              transform: rotate(180deg);
            }
          }

          i {
            display: inline-block;
            vertical-align: middle;
          }

          .con {
            display: inline-block;
            margin: 0 5px;
            font-size: 14px;
            vertical-align: middle;
          }

          .userImg {
            display: inline-block;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: url('~images/commonHeader/defaultuser.png');
            background-size: contain;
            vertical-align: middle;
          }

          .leftIcon {
            font-size: 26px;
          }
        }
      }

      .logo {
        display: inline-block;
        width: 122px;
        height: 60px;
        // margin-top: 15px;
        float: left;
        position: relative;

        .logoBox {
          display: inline-block;
          width: 230px;

          img {
            width: 100%;
          }
        }

        // background: url('~images/logo.png');
        img {
          // margin: 6px 14px;
        }

        a {
          display: inline-block;
          width: 100%;
          height: 100%;
          text-indent: -1000px;
        }

        .down {
          position: absolute;
          bottom: -18px;
          left: 0;
          width: 112px;
          height: 18px;
          overflow: hidden;

          .reflection {
            width: 100%;
            height: 30px;
            -webkit-transform: scaleY(-1);
            -moz-transform: scaleY(-1);
            -ms-transform: scaleY(-1);
            -o-transform: scaleY(-1);
            transform: scaleY(-1);
            opacity: 0.2;
            filter: alpha(opacity='20');
          }
        }
      }

      .fistMenu {
        display: block;
        margin-left: 230px;
        // margin-right: 512px;
        span {
          font-size: 16px;
          //font-family: 'MicrosoftYaHei, 微软雅黑';
          vertical-align: middle;
        }

        .item {
          display: block;
          cursor: pointer;
          color: #f3fbff;
          float: left;
          margin: 0 18px;
          line-height: 60px;
          height: 60px;
          padding: 0;
          position: relative;

          &.active {
            &:after {
              display: block;
              content: '';
              height: 2px;
              width: 100%;
              position: absolute;
              left: 0;
              bottom: 5px;
              background: #fff;
            }
          }

          i {
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
            font-size: 28px;
          }

          .con {
            display: inline-block;
            vertical-align: middle;
          }
        }

        .moreItem {
          display: block;
          cursor: pointer;
          color: #f3fbff;
          float: left;
          margin: 0 20px;
          line-height: 60px;
          height: 60px;
          padding: 0;

          &:hover {
            .down {
              transform: rotate(180deg);
            }
          }

          .leftIcon {
            display: inline-block;
            vertical-align: middle;
            font-size: 26px;
          }

          .con {
            display: inline-block;
            margin: 0 5px;
            vertical-align: middle;
          }

          .down {
            font-size: 22px;
            vertical-align: middle;
          }

          .list {
            .con {
              min-width: 110px;
              text-overflow: ellipsis;
              overflow: hidden;
              margin: 0 10px;
              white-space: nowrap;
            }

            .rightIcon {
              font-size: 16px;
            }

            .leftIcon {
              font-size: 26px;
            }
          }
        }
      }
    }
  }

  .zySidebarWrapper {
    position: fixed;
    z-index: 100;
    left: 0;
    top: 60px;
    bottom: 0;
    width: 230px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
    padding-bottom: 32px;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease; /* Firefox 4 */
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -o-transition: all 0.5s ease; /* Opera */
    //background: #192c4d;
    .zySidebar {
      height: 100%;
      transition: all 0.5s ease;
      -moz-transition: all 0.5s ease; /* Firefox 4 */
      -webkit-transition: all 0.5s ease; /* Safari and Chrome */
      -o-transition: all 0.5s ease; /* Opera */
      transform: translateX(0);
      opacity: 1;
      overflow-y: auto;

      .ivu-progress {
        position: fixed;
        bottom: 1%;
      }

      .progressTitle {
        text-align: center;
        position: fixed;
        bottom: 3%;
        margin-left: 45px;
      }

      .subItem {
        height: 50px;
        line-height: 50px;
        cursor: pointer;
        overflow: hidden;

        .content {
          padding: 0 16px 0 26px;
          display: block;
          color: #333333;
          height: 50px;
          line-height: 50px;

          i {
            display: inline-block;
            vertical-align: middle;
            color: #b2b2b2;
          }

          .iconLeft {
            color: #888e97;
            font-size: 22px;
            display: inline-block;
            width: 30px;
            line-height: 30px;
            height: 30px;
            text-align: center;
            border-radius: 50%;
          }

          .arrow {
            color: #999999;
            font-size: 14px;
          }

          .con {
            display: inline-block;
            vertical-align: middle;
            width: 120px;
            color: #333333;
            overflow: hidden;
            margin-left: 10px;
            font-size: 16px;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .childMenu {
          display: block;

          li {
            height: 35px;
            line-height: 35px;
            color: #7f8f9d;
            padding-left: 57px;
            font-size: 14px;
            position: relative;

            &.active {
              color: #1c82f9;
              background-color: rgba(21, 126, 249, 0.1);

              &:after {
                display: block;
                content: '';
                width: 3px;
                height: 35px;
                background-color: #157ef9;
                position: absolute;
                left: 0;
                top: 0;
              }
            }

            .thirdItem {
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              display: inline-block;
              width: 100%;
            }
          }
        }

        &.active {
          .content {
            .iconLeft {
            }

            i,
            .con {
              color: #1c82f9;
            }
          }
        }

        &.open {
          height: auto;

          .arrow {
            transform: rotate(90deg);
          }
        }
      }
    }

    .zyMinSidebar {
      position: absolute;
      top: 0;
      bottom: 32px;
      left: -55px;
      transition: all 0.5s ease;
      -moz-transition: all 0.5s ease; /* Firefox 4 */
      -webkit-transition: all 0.5s ease; /* Safari and Chrome */
      -o-transition: all 0.5s ease; /* Opera */
      .describe {
        display: none;
      }

      .iconWrap {
        width: 55px;
        display: block;
        position: relative;
        left: 0;
        top: 0;
        text-align: center;
        height: 50px;
        line-height: 50px;
        cursor: pointer;
        color: #888e97;

        i {
          font-size: 20px;
        }

        .describe {
          position: absolute;
          right: 0;
          top: 0;
          transform: translateX(100%);
          min-width: 220px;
          background: url('~images/commonHeader/activeBg.png') no-repeat;
          background-size: 100% 100%;
          height: 50px;
          line-height: 50px;
          text-indent: 20px;
          color: #fff;
          white-space: nowrap;
          border-radius: 3px;
          display: none;
          padding: 0 30px;
          text-align: left;
          font-size: 16px;
        }

        &.active {
          background-color: rgba(24, 123, 219, 0.2);
          position: relative;
          color: #157ef9;

          &:after {
            display: block;
            content: '';
            width: 5px;
            height: 50px;
            background-color: #187bdb;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
      }
    }

    .shrinkBtn {
      background-color: rgba(24, 123, 219, 0.1);
      box-shadow: 0px 0px 5px 0px rgba(51, 51, 51, 0.1);
      color: #187bdb;
      border: none;
      outline: none;
    }
  }

  .menuAnimate {
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease; /* Firefox 4 */
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -o-transition: all 0.5s ease; /* Opera */
    width: 55px;

    .zySidebar {
      transition: all 0.5s ease;
      -moz-transition: all 0.5s ease; /* Firefox 4 */
      -webkit-transition: all 0.5s ease; /* Safari and Chrome */
      -o-transition: all 0.5s ease; /* Opera */
      transform: translateX(-200px);
      opacity: 0;
    }

    .zyMinSidebar {
      left: 0;
      transition: all 0.5s ease;
      -moz-transition: all 0.5s ease; /* Firefox 4 */
      -webkit-transition: all 0.5s ease; /* Safari and Chrome */
      -o-transition: all 0.5s ease; /* Opera */
      .iconWrap {
        &:hover {
          .describe {
            display: block;

            i {
              color: #fff;
            }
          }
        }
      }
    }
  }

  .currentLocation {
    width: 1240px;
    min-height: 18px;
    color: #a0a0a0;
    line-height: 18px;
    margin: 0 auto;
    padding: 15px 0;

    .item {
      display: inline-block;
      vertical-align: middle;
    }

    i {
      font-size: 18px;
      margin-right: 5px;
    }

    em {
      color: #999999;
      font-size: 12px;
      font-weight: normal;
      vertical-align: middle;
    }

    span {
      a {
        font-size: 12px;
        color: #555;
        margin: 0 12px;
      }
    }

    .currentPageLocation {
      color: #2cb1fb !important;
    }
  }

  .zy-currentLocation {
    margin: 0 20px 0 250px;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease; /* Firefox 4 */
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -o-transition: all 0.5s ease; /* Opera */
    width: auto !important;
  }

  .currentLocationAnimateBack {
    margin: 0 20px 0 80px;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease; /* Firefox 4 */
    -webkit-transition: all 0.5s ease; /* Safari and Chrome */
    -o-transition: all 0.5s ease; /* Opera */
  }
}
</style>

<style lang="scss">
.notice {
  font-size: 25px !important;
  position: relative;

  span {
    position: absolute;
    color: #ffffff;
    font-size: 9px;
    text-align: center;
    line-height: 14px;
    top: 30%;
    right: -8%;
    border-radius: 50%;
    background-color: red;
    min-width: 14px;
    height: 14px;
  }
}

.zyCommonWrapper {
  .moreItem {
    .ivu-select-dropdown {
      margin: -10px 0 5px 0;

      &::after {
        display: block;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: -10px;
        left: 50%;
        border-width: 0 10px 10px 10px;
        transform: translateX(-50%);
        border-style: solid;
        border-color: transparent transparent #fff transparent;
      }
    }
  }

  .rightInfo {
    .ivu-select-dropdown {
      margin: -5px 0 5px 0;
      max-height: 1000px !important;

      &::after {
        display: block;
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        top: -10px;
        left: 50%;
        border-width: 0 10px 10px 10px;
        transform: translateX(-50%);
        border-style: solid;
        border-color: transparent transparent #fff transparent;
      }
    }
  }
}
</style>
